<template>
	<view class="temporary">
		<view class="">
			<picker v-if="false" mode="selector" :range="options" range-key='xmflTitle' @change="bindChange">
				<view class="uni-input">
					<text>{{options[index].xmflTitle}}</text>
					<image src="/static/images/icon.png" mode="widthFix"></image>
				</view>
			</picker>
			<!-- <text class="create-title">设置结束时间</text>
			<picker mode="time" :value="time" @change="bindTimeChange">
				<view class="uni-input">{{time||'请选择结束时间'}}</view>
			</picker> -->
			<text class="create-title">选择设备</text>
			<text class="tips">注意：跑步相关项目至少需要2个设备</text>
			<checkbox-group @change="checkboxChange" class="group-box">
				<label class="uni-list-cell" v-for="(item, index) in listData" :key="index" @click="handleSingleChange(item)">
					<view class="flex-sp">
						<view class="flex-box">
							<view :class="item.sbIszx=='1'?'on-line line-box':'out-line line-box'"></view>
							<text style="font-size: 24upx;">{{item.sbClientid}}</text>
						</view>
						<checkbox v-if="item.sbIszx=='1'" :value="item.id" color="#fff" :checked="item.checked" style="transform:scale(0.8)" />
						<text v-else style="font-size: 24upx;color: #999;">离线</text>
					</view>
					<view class="flex-sp">
						<view class="xm-name">
							<text v-for="itemm in item.shebeiProjectList">{{itemm.remark}}</text>
							<text>关联项目</text>
						</view>
						<view class="tie-r" v-if="item.shebeiProjectList.length>0">
							<image :src="'/static/images/item'+item.shebeiProjectList[0].projectid+'.png'" mode="widthFix"></image>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="start-btn">
			<button @click="startTc">开始体测</button>
		</view>
		
		<!-- 弹窗 -->
		<run-model-vue ref="runModel" @runData='getRun'></run-model-vue>
	</view>
</template>

<script>
	import runModelVue from '../../components/runModel.vue'
	export default {
		components:{runModelVue},
		data() {
			return {
				options:[],
				index:0,
				listData:[],
				time:'',
				current: [],
				formData:{
					nmn:'',
					qid:''
				},
				runIds:[2,8,12,13],
				runList:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getlist()
			this.getUser()
			this.getTc()
		},
		onHide() {
			
		},
		mounted() {
		    
		},
		methods: {
			async getUser(){
				let res = await this.http('get','/system/user/getInfo')
				console.log(res)
				if(res.code==200){
					this.getSb(res.user.deptId)
				}
			},
			async getlist(){
				let res = await this.http("get","/tc/tctype/list",{
					pageNum:1,
					pageSize:10
				})
				console.log(res)
				if(res.code==200){
					this.options = res.rows
				}
			},
			async getSb(e){
				let res = await this.http("get","/tc/shebei/list",{
					pageNum:1,
					pageSize:15,
					sbXxid:e,
					sbClientid:''
				})
				if(res.code==200){
					console.log(res.rows)
					res.rows.forEach(item => {
						item.id = item.id.toString()
					});
					this.listData = res.rows
					console.log(res.rows)
				}
			},
			async getTc(){
				let res = await this.http("get","/tc/tcOperate/getTcqueueList")
				console.log(res)
				if(res.code==200){
					res.data.forEach(item=>{
						if(item.status=='1'){
							this.formData.qid = item.id
						}
					})
					let res1 = await this.http("get","/tc/tcOperate/tcQueueStudentList",{
						pageNum: 1,
						pageSize: 10,
						queueid: this.formData.qid
					})
					this.formData.nmn = res1.total
				}
			},
			handleSingleChange(e){
				console.log(e)
				if(this.current.includes(e.id)){
					if(this.runIds.includes(e.shebeiProjectList[0].projectid)){
						this.$refs.runModel.openModel(e.id,e.shebeiProjectList[0].projectid)
					}
				}
			},
			getRun(e){
				console.log(e)
				this.runList.push(e)
			},
			checkboxChange: function (e) {
				console.log(e.detail.value)
				this.current = e.detail.value
				var items = this.listData;
				var values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			bindChange(e){
				console.log(e.detail.value)
				this.index = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			async startTc(){
				if(this.current.length>0){
					let res = await this.http("post","/tc/tcOperate/addTcqueueDevices",{
						id: this.formData.qid,
						devices: this.current.join(',')
					})
					console.log(res)
					try {
						const requests = this.current.map(item=> new Promise((resolve, reject) =>{
							let formNew={}
							let newData = this.runList.find(obj => obj.qid === item)
							console.log(newData)
							if(newData){
								formNew = {
									pdc : Number(newData.runway),
									qdsb : newData.startName
								}
							}
							const sbIp = this.listData.find(itemm=>itemm.id==item).sbIp2
							const result = sbIp.replace(/^(.*?):.*$/, (match, group1) => group1 || sbIp);
							console.log(formNew)
							console.log(result)
							const formData = { 
								ope: 'A',
								pid: this.listData.find(itemm => itemm.id === item).shebeiProjectList[0].projectid,
								...this.formData,
								...formNew
							  };
							uni.request({
								url: 'http://'+result+':8000', //仅为示例，并非真实接口地址。
								data: formData,
								sslVerify: false,
								header:{
									'content-type':'application/x-www-form-urlencoded'
								},
								method:'post',
								success: (res1) => {
									console.log(res1.data);
									resolve(res1.data.status)
								},
								fail: (err) => {
									console.error('请求失败:', err);
									reject(err); // 必须处理失败
								}
							});
						}))
						// 等待全部完成
						const responses = await Promise.all(requests);
						// 验证结果
						const allSuccess = responses.every(res2 => res2 == 'success');
						if (allSuccess) {
						  this.toast('开启成功')
						  setTimeout(()=>{
						  	uni.switchTab({
						  		url:'/pages/index/index'
						  	})
						  },1000)
						}
					}catch (error) {
						console.log('部分请求失败')
						// uni.showToast({ title: '部分请求失败' });
						// this.toast('开启失败')
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1000)
					}
				}else{
					this.toast('请选择设备')
				}
			}
		}
	}
</script>

<style lang="less">
	.create-title{
		font-size: 32upx;
		color: #1A1A1A;
		display: block;
		margin-bottom: 10upx;
	}
	.tips{
		font-size: 24upx;
		color: red;
		display: block;
		margin-bottom: 20upx;
	}
	.temporary{
		width: 100%;
		padding: 20upx 40upx;
		box-sizing: border-box;
		position: relative;
		button{
			width: 90%;
			border-radius: 120upx;
			background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
			color: #fff;
			margin: 20upx auto;
		}
	}
	.group-box{
		width: 100%;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 200upx;
	}
	.xm-name{
		margin-top: 10upx;
		text{
			display: block;
			&:last-child{
				color: #999;
				font-size: 24upx;
			}
		}
	}
	.tie-r{
		margin-top: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 76upx;
			height: auto;
		}
	}
	.flex-box{
		display: flex;
		align-items: center;
	}
	.flex-sp{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.line-box{
		width: 8upx;
		height: 8upx;
		border-radius: 50%;
		margin-right: 10upx;
	}
	.on-line{
		background-color: #11C88C;
	}
	.out-line{
		background-color: #EE1314;
	}
	.uni-list-cell{
		width: 48%;
		margin: 0 1% 20upx 1%;
		line-height: 40upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #F0F7FA;
		font-size: 28upx;
		border-radius: 12upx;
		/deep/ uni-checkbox .uni-checkbox-input{
			border-radius: 50% !important;
		}
		/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
			background-color: #63ABFA;
		}
	}
	.start-btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		box-shadow: 0 0 6upx rgba(0,0,0,0.1);
	}
	.uni-input {
		width: 100%;
		line-height: 84upx;
		background-color: #F5F7F9;
		margin-bottom: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28upx;
		image {
			width: 40upx;
			height: auto;
		}
	}
</style>